<template>
  <view class="major-entrance">
    <view 
      class="entry-container"
      v-for="item in entries"
      :key="item.path"
      @click="toCategory(item)">

      <!-- <image class="entry-icon" :src="`/static/${item.icon}`"></image> -->

      <view class="entry-content">
        <view class="entry-title">{{item.title}}</view>
        <view class="entry-describe">{{item.describe}}</view>
      </view>

    </view>
  </view>
</template>
<script>
export default {
  name: 'major-entrance',
  data() {
    return {
      entries: [{
        title: '景点门票',
        describe: '景点门票超值购',
        path: '/pages/tickets/list/index',
        icon: 'tickets-icon.png'
      }, {
        title: '线路游',
        describe: '精选玩法任你行',
        path: '/pages/tourline/list/index',
        icon: 'tourline-icon.png'
      }, {
        title: '定制游',
        describe: '您的专属定制专家',
        path: '/pages/custom-tour/index',
        icon: 'tourline-icon.png'
      }]
    }
  },

  methods: {
    toCategory(item){
      this.$emit('click:category', item)
    }
  }
}
</script>
<style lang="less">
.major-entrance {
  .flex;
  .flex-between;
  
  margin-bottom: 20rpx;

  .entry-container {
    .flex;
    .flex-middle;

    width: 340rpx;
    padding: 20rpx;
    box-sizing: border-box;

    background-color: #fff;
    border-radius: 10rpx;
    box-shadow: 0 4rpx 60rpx 0 rgba(0, 0, 0, 0.04);
    overflow: hidden;

    // .entry-icon {
    //   width: 30rpx;
    //   height: 30rpx;
    //   margin-right: 14rpx;
    // }

    .entry-content {
      .flex-1;

      .entry-title {
        color: @font_color;
        font-weight: bold;
        font-size: 32rpx;
        line-height: 44rpx;
        margin-bottom: 2rpx;
      }

      .entry-describe {
        .line-ellipsis;

        color: @font_light_color;
        font-size: 24rpx;
        line-height: 34rpx;
      }
    }
  }
}
</style>